<script setup lang="ts">
	//引入组件
	import {getSearchAPI} from '@/apis/music.uts'
import { ref } from 'vue';
import {Result} from '@/types/serach.uts'
import {userUseStoreId } from '@/stores/musicStore.uts'
// 模拟数据
const mockData = ref<Result[]>([]) as any;
const userStore = userUseStoreId();
const searchText = ref<string>('');
const showResults = ref(false);
const showEmpty = ref(false);

// 搜索处理
const handleSearch = async () => {
  if (!searchText.value.trim()) return;
  const res= await getSearchAPI({
	  keywords:searchText.value,
	  type:1,
	  limit :30
  })
  mockData.value = res.result.songs;
  console.log(res,searchText.value);
  // 模拟搜索逻辑
  showResults.value = true;
  showEmpty.value = mockData.value.length === 0;
};

// 播放预览（静态演示）
const playPreview = (item,index,id) => {
	uni.navigateTo({
		url:`/subPagesMusic/MusicHeader/index?id=${id}`
	})
	userStore.name=item.name
	userStore.artist=item.ar[0].name
	console.log('歌曲',mockData.value[index]);
  uni.showToast({
    title: `播放: ${item.name}`,
    icon: 'none'
  });
};

// 格式化时长
const formatDuration = (seconds) => {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs.toString().padStart(2, '0')}`;
};
</script>

<template>
	<scroll-view class="music-search-container"  direction='vertical' :show-scrollbar="false">
	
  <view >
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input 
        class="search-input"
        v-model="searchText"
        placeholder="搜索歌曲、歌手、专辑"
        placeholder-style="color:#999"
        @confirm="handleSearch"
      />
      <text class="search-btn" @click="handleSearch">搜索</text>
    </view>

    <!-- 搜索结果区 -->
    <scroll-view 
	style="height: 100%;"
      class="result-container"
      direction='vertical'
      :refresher-enabled="false"
      v-if="showResults"
	  :show-scrollbar="false"
    >
      <!-- 歌曲列表 -->
      <view 
        class="song-item"
        v-for="(item, index) in mockData"
        :key="item.id"
        @click="playPreview(item,index,item.id)"
      >
        <image class="album-cover" :src="item.al.picUrl" mode="aspectFill" />
        <view class="song-info">
          <text class="song-title">{{ item.name }}</text>
          <text class="song-desc">{{item.al.name}}</text>
        </view>
        <text class="duration">{{ item.ar[0].name}}</text>
      </view>
    </scroll-view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="showEmpty">
      <image class="empty-icon" src="/static/empty-music.png" />
      <text class="empty-text">没有找到相关歌曲</text>
    </view>
  </view>
  </scroll-view>
</template>



<style lang="scss">
.music-search-container {
	width: 700rpx;
  padding: 20rpx 32rpx;
  margin: 0 auto;
  height: 100%;
  .search-bar {
    display: flex;
    align-items: center;
	flex-direction: row;
    height: 80rpx;
    background: #f5f5f5;
    border-radius: 40rpx;
    padding: 0 30rpx;
    
    .search-input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
      color: #333;
    }
    
    .search-btn {
      color: #fff;
      background: #e94b40;
      padding: 12rpx 32rpx;
      border-radius: 32rpx;
      font-size: 28rpx;
    }
  }

  .result-container {
    margin-top: 40rpx;
    height: calc(100vh - 200rpx);
    
    .song-item {
		text-align: center;
      display: flex;
	  flex-direction: row;
	  justify-content: space-around;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #eee;
      
      .album-cover {
		  display: flex;
		  justify-content: center;
		  align-items: center;
        width: 100rpx;
        height: 100rpx;
		text-align: center;
		padding-left: 20rpx;
        border-radius: 12rpx;
        margin-right: 24rpx;
      }
      
      .song-info {
        flex: 1;
         display: flex;
        	  justify-content: center;
              align-items: center;
        
        .song-title {
          font-size: 32rpx;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .song-desc {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .duration {
        color: #666;
        font-size: 26rpx;
        margin-left: 20rpx;
      }
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120rpx;
    
    .empty-icon {
      width: 200rpx;
      height: 200rpx;
      opacity: 0.6;
    }
    
    .empty-text {
      color: #999;
      font-size: 28rpx;
      margin-top: 24rpx;
    }
  }
}
</style>